import { t } from 'i18next'
import React, { forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react'
import { Button, Modal, Table, ColumnProps, Upload, KdFile } from '@kedacom/react-next'
import { transMeetingDocItem } from './translator'
import copy from 'copy-to-clipboard'
import { useDeepCompare } from '@kedacom/hooks'
import { StyledBottom } from './style'
import { API_MEETING_PREFIX } from '@/utils/constant'
import Alert, { confirmModal } from '@/components/Alert'
import { useGlobalStore } from '@/store/global'
import {
	fetchDeleteMeetingFiles,
	fetchGetMeetingFiles,
	fetchGetMeetingSpaceShareInfo,
	ItemStatus,
	IMeetingDocItem,
} from '@/api/meetingSpace'
import { useRequest } from 'ahooks'
import { IconCopy } from '@/components/Icon'
import { Wrap, Title, BlueSpan, BlueLinkSpan, GreenSpan, StyledModalWrap, StyledShareModalFooter } from './style'
import shallow from 'zustand/shallow'
import { updateDescription } from '@/plugins/axios/errorCode'

interface DocPropsEntity {
	/**当前会议的meetingMoid*/
	meetingMoid: string
	/**会议名称*/
	name: string
	/**会议的e164 */
	e164: string
	/**会议时间 */
	dateTime: string
	/** 审批会议 */
	isAudit?: boolean
}
/*
isFileExtensionAccept 文件上传格式限制

endsWith 用于检查一个字符串是否以指定的子字符串结尾。
*/
function isFileExtensionAccept(fileName: string) {
	const ext = ['txt', 'doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'pdf', 'rar', 'zip', 'jpg', 'png', 'bmp']
	for (const x of ext) {
		if (fileName.endsWith(`.${x}`)) {
			return true
		}
	}
	return false
}
export type DocsRef = {
	getFileNumber: () => number
}
/** 会议文档 */
const Docs = forwardRef(({ meetingInfo }: { meetingInfo: DocPropsEntity }, ref: React.Ref<DocsRef>) => {
	useImperativeHandle(ref, () => ({
		getFileNumber() {
			return tableData.length
		},
	}))
	const { user, SWITCH } = useGlobalStore(
		(state) => ({
			user: state.user,
			SWITCH: state.SWITCH,
		}),
		shallow
	)
	const [preUploadData, setPreUploadData] = useState<IMeetingDocItem[]>([])
	const initUploadFileIds = useRef<string[] | null>(null)
	const [shareModalVisible, setShareModalVisible] = useState<boolean>(false)
	const [extractCode, setExtractCode] = useState<string>('')
	const [tableData, setTableData] = useState<IMeetingDocItem[]>([])
	const [modalShareUrl, setModalShareUrl] = useState('')
	const { data, run, runAsync } = useRequest(fetchGetMeetingFiles, {
		manual: true,
		onSuccess: (data) => {
			if (data) {
				if (!initUploadFileIds.current) {
					initUploadFileIds.current = data.map((x) => x.file_id)
				}
				const list = data.map((x) => transMeetingDocItem(x, initUploadFileIds.current))
				setTableData([...list, ...preUploadData])
			}
		},
	})

	const Columns = useMemo<ColumnProps<IMeetingDocItem>[]>(
		() => [
			{
				dataKey: 'fileName',
				title: t('文件名称'),
				width: 278,
			},
			{
				dataKey: 'creator',
				title: t('上传人员'),
				width: 90,
			},
			{
				dataKey: 'createTime',
				title: t('上传时间'),
				width: 130,
			},
			{
				dataKey: 'fileSize',
				title: t('大小'),
				width: 70,
			},
			{
				dataKey: 'status',
				title: t('状态'),
				width: 90,
				render: (rowData: IMeetingDocItem) => {
					if (rowData.progress === 'checking') {
						return <BlueSpan>{t('正在检查文件...')}</BlueSpan>
					} else if (rowData.progress === 'uploadSuccess') {
						return <GreenSpan>{t('上传成功')}</GreenSpan>
					}
				},
			},
			{
				dataKey: 'action',
				title: t('操作'),
				width: 100,
				render: (rowData: IMeetingDocItem) => {
					if (rowData.progress === 'checking' || meetingInfo.isAudit) return ''
					return (
						<>
							<BlueLinkSpan
								onClick={(e) => {
									e.stopPropagation()
									DownloadFile(rowData)
								}}
							>
								{t('下载')}
							</BlueLinkSpan>
							<BlueLinkSpan
								onClick={(e) => {
									e.stopPropagation()
									DeleteFile(rowData)
								}}
							>
								{t('删除')}
							</BlueLinkSpan>
						</>
					)
				},
			},
		],
		[meetingInfo]
	)
	useEffect(() => {
		run(meetingInfo.meetingMoid)
	}, useDeepCompare([data, preUploadData]))

	const DownloadFile = (item: IMeetingDocItem) => {
		if (item.status === '0') {
			Alert(t('文件服务器不存在'))
		} else if (item.status === '2') {
			Alert(t('文件服务器不可访问'))
		} else {
			fetchGetMeetingFiles(meetingInfo.meetingMoid).then((data) => {
				if (data) {
					let id = data.find((i) => {
						return i.file_id === item.fileId
					})
					if (id) {
						window.open(`${API_MEETING_PREFIX}/meeting_files/${item.fileId}/brower`)
					} else {
						Alert(t('文件不存在'))
						run(meetingInfo.meetingMoid)
					}
				}
			})
		}
	}
	const DeleteFile = (item: IMeetingDocItem) => {
		if (item.status === '0') {
			Alert(t('文件服务器不存在'))
		} else if (item.status === '2') {
			Alert(t('文件服务器不可访问'))
		} else {
			confirmModal({
				msg: t('是否删除文件{{name}}', { name: item.fileName }),
				onOk: async () => {
					if (!item.fileId) {
						setTableData((data) => {
							return data.filter((value) => {
								return item.fileName !== value.fileName
							})
						})
					} else {
						fetchDeleteMeetingFiles(item.fileId)
							.then((res) => {
								if (res.success) {
									run(meetingInfo.meetingMoid)
								} else {
									Alert(res.description || t('操作失败！'))
								}
							})
							.catch((err) => {
								Alert(t('删除失败！'))
							})
					}
				},
			})
		}
	}
	const beforeUpload = (file: KdFile) => {
		if (tableData.length === 10) {
			return false
		}
		const fileName = file.name
		if (/ <>'"\\\//.test(fileName)) {
			Alert(t('文件名不可包含特殊字符。'))
			return false
		}
		if (!isFileExtensionAccept(fileName)) {
			Alert(t('文件的格式仅限于：txt、doc、docx、xls、xlsx、ppt、pptx、pdf、rar、zip、jpg、png、bmp。'))
			return false
		}
		if (file.size === 0) {
			Alert(t('上传的文件为空文件，请重新上传！'))
			return false
		} else if (file.size > 20971520) {
			Alert(t('文件过大，请重新选择不超过20MB的文件上传。'))
			return false
		}
		setPreUploadData((pre) => {
			return [
				...pre,
				{
					creator: '',
					fileId: '',
					fileName,
					fileSize: file.size < 0.01 ? `0.01M` : `${(file.size / 1024 / 1024).toFixed(2)}M`,
					fileUrl: '',
					createTime: '',
					status: ItemStatus.notExist,
					progress: 'checking',
				},
			]
		})
		return true
	}
	const handleShare = () => {
		fetchGetMeetingSpaceShareInfo(meetingInfo.meetingMoid).then((res) => {
			if (res.success) {
				const extractCode = res.data?.extract_code || ''
				const shareUrl = res.data?.share_url || ''
				setExtractCode(extractCode)
				setShareModalVisible(true)
				setModalShareUrl(shareUrl)
			} else {
				Alert(res.description || t('操作失败！'))
			}
		})
	}
	return (
		<>
			{!user?.enable_upload ? (
				<></>
			) : (
				<Wrap>
					<Title>
						<div className="tip_wrap">
							<div className="file_title">{t('文件列表')}</div>
							<div className="file_number">（{tableData.length}）</div>
						</div>
						{!meetingInfo.isAudit && (
							<div>
								{meetingInfo.meetingMoid && (
									<Button
										style={{ marginRight: 8 }}
										onClick={handleShare}
										disabled={tableData.length <= 0}
									>
										{t('分享会议文档')}
									</Button>
								)}
								<Upload
									onSuccess={(response: FetchRes<IMeetingDocItem>, originFile) => {
										if (response) {
											updateDescription(response)
											if (!response.success) {
												const description = response.description ?? t('上传失败')
												Alert(description)
											}
										} else {
											Alert(t('上传失败'))
										}
										runAsync(meetingInfo.meetingMoid).then(() => {
											setPreUploadData((pre) => pre.filter((x) => x.fileName !== originFile.name))
										})
									}}
									onError={(err, r, originFile) => {
										setPreUploadData((pre) => pre.filter((x) => x.fileName !== originFile.name))
										Alert(t('上传失败'))
									}}
									headers={{ 'X-Requested-With': null }}
									action={`${API_MEETING_PREFIX}/meeting_files/${meetingInfo.meetingMoid}`}
									beforeUpload={(file) => beforeUpload(file)}
									disabled={tableData.length >= 10}
								>
									<Button disabled={tableData.length >= 10}>{t('上传文档')}</Button>
								</Upload>
							</div>
						)}
					</Title>
					<Table
						rowIdField={'fileId'}
						data={tableData}
						columns={Columns}
						showOrderColumn={false}
						showSelectColumn={false}
						id="upload-dcs-table"
						className="table_wrap"
						nodata={t('暂无数据')}
						i18n={{ order: t('序号') }}
					/>
					<Modal
						open={shareModalVisible}
						width={500}
						height={348}
						title={t('分享会议文档')}
						onCancel={() => setShareModalVisible(false)}
						footer={
							<StyledShareModalFooter className="share-modal-footer">
								<Button
									type="primary"
									onClick={() => {
										copy(
											t('会议名称') +
												'	' +
												meetingInfo.name +
												'\r\n' +
												t('会议时间') +
												'   ' +
												meetingInfo.dateTime +
												'\r\n' +
												t('会议号码') +
												'   ' +
												meetingInfo.e164 +
												'\r\n' +
												t('分享链接') +
												'   ' +
												modalShareUrl +
												'\r\n' +
												t('提取码') +
												'   ' +
												extractCode +
												'\r\n'
										)
										Alert(t('复制完整信息成功'))
									}}
								>
									{t('复制全部信息')}
								</Button>
							</StyledShareModalFooter>
						}
					>
						<StyledModalWrap>
							<div>
								<span className="modal-item-label">{t('会议名称')}</span>
								<span className="modal-item-value">{meetingInfo.name}</span>
							</div>
							<div>
								<span className="modal-item-label">{t('会议时间')}</span>
								<span className="modal-item-value share-modal-time__i18n" title={meetingInfo.dateTime}>
									{meetingInfo.dateTime}
								</span>
							</div>
							<div>
								<span className="modal-item-label">{t('会议号码')}</span>
								<span className="modal-item-value">{meetingInfo.e164}</span>
							</div>
							<div>
								<span className="modal-item-label">{t('分享链接')}</span>
								<span className="modal-item-value" title={modalShareUrl}>
									{modalShareUrl}
								</span>
								<IconCopy
									onClick={() => {
										copy(modalShareUrl)
										Alert(t('复制成功'))
									}}
								/>
							</div>
							<div>
								<span className="modal-item-label">{t('提取码')}</span>
								<span className="modal-item-value">{extractCode}</span>
							</div>
						</StyledModalWrap>
					</Modal>
					{!meetingInfo.isAudit && (
						<StyledBottom style={{ padding: '10px' }}>
							<div>{t('会议结束30天后系统自动删除会议文档。')}</div>
							<div>{t('最多上传10个文件，每个文件不超过20MB。')}</div>
							<div>
								{t('上传的文档格式为')}
								：txt、doc、docx、xls、xlsx、ppt、pptx、pdf、rar、zip、jpg、png、bmp。
							</div>
						</StyledBottom>
					)}
				</Wrap>
			)}
		</>
	)
})
export default Docs
